<template>
    <n-form style="height:30px" inline label-align="left" label-placement="left" :model="formValue" ref="formRef">
        <n-form-item v-for="(item, index) in formList" :key="index" :label="item.label">
            <component
            v-model:value="formValue[item.enName]"
            :is="item.type"
            :size="item.size"
            :clearable="item.clearable"
            :style="{ minWidth: item.width }"
            :options="item.options"
            :placeholder="item.placeholder"
            >
            </component>
        </n-form-item>
        <n-form-item>
            <n-input type="text" size="small" :clearable="true" v-model:value="formValue.user" placeholder="请输入关键词">
            <template #prefix>
                <n-icon>
                <Search />
                </n-icon>
            </template>
            </n-input>
        </n-form-item>
        <n-form-item>
            <n-button type="primary" size="small" @click="info('搜索')"> 查询 </n-button>
        </n-form-item>
        <n-form-item>
            <n-button size="small" @click="add('新增题目')">重置</n-button>
        </n-form-item>
    </n-form>
    <Model :showModal="showModal" :formValue="formValue" :ModelObj="Obj" :FormData="FormData" @ModelClick="ModelClick"></Model>
</template>

<script lang="ts">
import { h, defineComponent, ref, reactive } from 'vue';
import aIcon from '../../../../assets/icons/Icon.vue';
import Search from '../../../../assets/icons/Search.vue'
import { Model } from '@/components/Model';
export default defineComponent({
  components: {
    aIcon,
    Search,
    Model,
  },
  setup(props,{ emit }) {
    const showModal = ref(false);
    const formValue = ref({})
    const Obj = ref({});

    //搜索
    const info = (row) => {
      console.log(formValue)
    };

    //新增按钮点击
    const add = (row) => {
      Obj.value = {title:row}
      showModal.value = true;
      formValue.value = {}
    };
    //接受子组件传递过来的事件
    const ModelClick = (row) => {
      showModal.value = row;
    };
    return {
      formValue,
      formList: reactive([
        {
          label: '所属部门',
          type: 'n-select',
          enName: 'aaa',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力111', value: 1 },
            { label: '徐丽丽李111', value: 2 },
          ],
        },
        {
          label: '题型',
          type: 'n-select',
          enName: 'bbb',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力222', value: 1 },
            { label: '徐丽丽李222', value: 2 },
          ],
        },
        {
          label: '行业领域',
          type: 'n-select',
          enName: 'ccc',
          width: '200px',
          clearable: true,
          size: 'small',
          options: [
            { label: '徐力333', value: 1 },
            { label: '徐丽丽李333', value: 2 },
          ],
        },
      ]),
      FormData:reactive([
        {label:'题型',type:'n-radio-group',enName:'tixing',clearable: true,size: 'small',placeholder:'请选择题型',options:[{label:'单选题',value:'单选题'},{label:'多选题',value:'多选题'},{label:'判断题',value:'判断题'},{label:'视频题目',value:'视频题目'}]},
        {label:'行业类型',type:'n-select',enName:'leixing',clearable: true,size: 'small',placeholder:'请选择行业类型',options: [{ label: '徐力111', value: '这是类型' },{ label: '徐丽丽李111', value: '徐丽丽李111' }]},
        {label:'标签',type:'n-select',enName:'biaoqian',clearable: true,size: 'small',placeholder:'请选择标签',options: [{ label: '徐力111', value: '这是标签	' },{ label: '徐丽丽李111', value: 2 }]},
        {label:'标题',type:'n-input',enName:'biaoti',clearable: true,size: 'small',placeholder:'请输入标题',},
        {label:'题目内容',type:'n-input',cenName:'neirong',learable: true,size: 'small',placeholder:'请输入题目内容',},
        {label:'选项',type:'n-input',enName:'xuanxiang',clearable: true,size: 'small',placeholder:'请输入选项',},
        {label:'答案',type:'n-input',enName:'daan',clearable: true,size: 'small',placeholder:'请输入答案',},
        {label:'解析',type:'n-input',enName:'jiexi',InputType:'textarea',clearable: true,size: 'small',placeholder:'请输入解析内容',},
      ]),
      info,
      add,
      showModal,
      ModelClick,
      Obj
    };
  },
});
</script>

<style>

</style>